<template>
  <a-tree-select
      :value="value"
      show-search
      :label-in-value="typeof value !== 'string'"
      :tree-data="options"
      :replace-fields="replaceFields"
      style="width: 100%"
      placeholder="Please select"
      @change="onChange"
      allow-clear>
    <a-icon slot="suffixIcon" type="apartment" />
  </a-tree-select>
</template>

<script>

export default {
  name: 'select-tree',
  props: {
    value: {
      required: true,
    },
    options: {
      type: Array,
      required: true,
      default: []
    },
  },
  data () {
    return {
      replaceFields: {
        children: 'children',
        title: 'name',
        key: 'id',
        value: 'id'
      },
    }
  },
  methods: {
    onChange (value) {
      console.log('value', value)
      this.$emit('change', value)
    },
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>
